<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>One on and rest off</title>
    <!--[if lt IE 7]>
    <script type="text/javascript">
    multiList = function (){
        var sfEl = document.getElementById('popup');
            sfEl.onmouseover=function() {
                this.className+=" over";
            }
            sfEl.onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        var sfEls2 = document.getElementById('popup').getElementsByTagName("LI");
            sfHover(sfEls2); 
    }

    sfHover = function(sfEls) {
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", multiList);

    </script>
    <![endif]-->
    <style type="text/css">
    p {
        margin:0
    }
    ul.popup {
        width:524px;
        border:1px solid #000;
        position:relative;
        margin:0 auto;
        padding:0;
        list-style:none;
    }
    ul.popup li {
        display:inline-block;
        border:10px solid #fff;
        vertical-align:top;
    }
    * html ul.popup li {
        display:inline
    }
    *+html ul.popup li {
        display:inline
    }
    .item {
        width:150px;
        height:150px;
        border:1px solid #000;
        background:red
    }
    .info {
        position:absolute;
        left:-999em;
        background:yellow;
        padding:10px;
        margin:-25px 0 0 10px;
        border:1px solid #000;
        width:130px;
    }
    .popup li:hover .item, 
    .popup li:hover .info,
    .popup li.over .item, 
    .popup li.over .info {
        position:relative;
        z-index:100
    }
    .popup li:hover .info,
    .popup li.over .info {
        left:auto;
        position:absolute
    }

    .popup:hover li,
    .popup.over li{
        opacity:0.2;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
    }
    .popup:hover li:hover,
    .popup.over li.over{
        opacity:1.0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    }

    </style>
    </head>
    <body bgcolor="#666666">
    <ul id="popup" class="popup">
        <li>
            <div class="item">Test1</div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text lortem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
        <li>
            <div class="item">Test2<b></b></div>
            <div class="info">
                <p>Lorem ipsum text</p>
            </div>
        </li>
    </ul>
    
    <div style="padding:30px 0px 30px 0px;">
                         <!-- Slider -->
                         <div style="background-image:url(images/lockbg1.jpg); width:325px; height:102px;">
                    <div style="padding-top:50px; padding-left:40px;">
                         <div class="sld">
                            <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-range-min"><div style="width: 0%;" class="ui-slider-range ui-widget-header ui-slider-range-min"></div><a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
                        </div>
                    </div>
                    <div style="font-family:Arial; font-weight:bold; font-size:12px; padding-top:10px;">
                        <div id="dvlock" style="float:left; padding-left:10px; color:#5b544f;">
                            Locked
                        </div>
                        <div id="dvunlock" style="float:right; color:#a6a3a3; padding-right:10px;">
                            Unlocked
                        </div>
                        <div class="err1">
                            <span id="custunlock" style="color:Red;display:none;">Slide to unlock and get registered</span>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                </div>
                         <!-- Slider -->
                        </div>
    </body>
    </html>

    